import React, { useState, useEffect } from "react";
import {
  Popup,
  Checkbox,
  Search,
  Cell,
  Button,
  Tag,
  DatetimePicker,
} from "react-vant";
import "./FilterDrawer.css";
import DateSelect from "./DateSelect";
import ExecutorSelect from "./ExecutorSelect";
import PrioritySelect from './PrioritySelect';

const FilterDrawer = ({ visible, onClose }) => {
  const [selectedExecutors, setSelectedExecutors] = useState([]);
  // 状态管理
  const [selectedTeam, setSelectedTeam] = useState(["设计组"]);
  const [selectedReporters, setSelectedReporters] = useState(["张伟成"]);
  // 执行人数据
  const [executors, setExecutors] = useState([
    {
      name: "于伟航",
    },
    {
      name: "小张",
    },
    {
      name: "严瑞元",
    },
    {
      name: "卢旭元",
    },
  ]);
  const [searchValue, setSearchValue] = useState("");

  const [showDatePicker, setShowDatePicker] = useState(false);
  const [selectedDate, setSelectedDate] = useState("");
  const [priority, setPriority] = useState("中");
  const [filterCount, setFilterCount] = useState(0);
  // 计算已选择的筛选条件数量
  useEffect(() => {
    let count = 0;

    // 计算已选择的任务组数量
    if (selectedTeam.length > 0) {
      count += 1;
    }

    // 计算已选择的报告人数量
    if (selectedReporters.length > 0) {
      count += 1;
    }

    // 计算已选择的执行人数量
    if (executors.length > 0) {
      count += 1;
    }

    // 计算日期是否已选择
    if (selectedDate) {
      count += 1;
    }

    // 计算优先级是否已选择（如果默认值不算作筛选条件，可以加判断）
    if (priority && priority !== "中") {
      count += 1;
    }

    setFilterCount(count);
  }, [selectedTeam, selectedReporters, executors, selectedDate, priority]);

  // 清空所有筛选条件
  const handleReset = () => {
    setSelectedTeam([]);
    setSelectedReporters([]);
    setExecutors([]);
    setSelectedDate("");
    setPriority("中");
    setSearchValue("");
  };
  // 数据
  const teams = ["设计组", "研发组", "测试组", "营销组", "项目管理组"];
  const reporters = [
    { name: "张伟成", avatar: "/tou1.png" },
    { name: "王一月", avatar: "/tou1.png" },
    { name: "李鹤轩", avatar: "/tou1.png" },
    { name: "蔡博朗", avatar: "/tou1.png" },
    { name: "段欣怡", avatar: "/tou1.png" },
  ];

  // 处理函数
  const handleTeamChange = (values) => {
    setSelectedTeam(values);
  };

  const handleReporterChange = (values) => {
    setSelectedReporters(values);
  };

  const handleExecutorRemove = (name) => {
    setExecutors(executors.filter((item) => item !== name));
  };

  const handleDateConfirm = (value) => {
    setSelectedDate(value);
    setShowDatePicker(false);
  };

  const handleSubmit = () => {
    const filterData = {
      teams: selectedTeam,
      reporters: selectedReporters,
      executors,
      date: selectedDate,
      priority,
    };
    console.log("筛选条件：", filterData);
    onClose();
  };

  return (
    <Popup
      visible={visible}
      position="right"
      style={{ width: "100%", height: "100%" }}
      onClose={onClose}
    >
      <div className="filter-container">
        {/* 头部 */}
        <div className="filter-header">
          <span>筛选</span>
          <span className="reset-btn" onClick={handleReset}>
            重置
          </span>
          <span className="close-icon" onClick={onClose}>
            ×
          </span>
        </div>

        {/* 时间周期 */}

        <DateSelect
          value={selectedDate}
          onChange={(date) => {
            setSelectedDate(date);
            // 可以在这里添加日期格式化
            // setSelectedDate(formatDate(date));
          }}
        />

        {/* 任务组 */}
        <div className="section">
          <div className="section-title">任务组</div>
          <Checkbox.Group value={selectedTeam} onChange={handleTeamChange}>
            {teams.map((team) => (
              <Checkbox key={team} name={team} shape="square">
                {team}
              </Checkbox>
            ))}
          </Checkbox.Group>
        </div>

        {/* 报告人 */}
        <div className="section">
          <div className="section-title">报告人</div>
          <Checkbox.Group
            value={selectedReporters}
            onChange={handleReporterChange}
          >
            {reporters.map((reporter) => (
              <Checkbox key={reporter.name} name={reporter.name} shape="square">
                <span className="reporter-item">
                  <img src={reporter.avatar} className="avatar" alt="" />
                  {reporter.name}
                </span>
              </Checkbox>
            ))}
          </Checkbox.Group>
        </div>

        {/* 执行人 */}
        {/* <div className="section">
          <div className="section-title">执行人</div>
          <Search
            value={searchValue}
            onChange={setSearchValue}
            placeholder="搜索"
          />
          <div className="executor-tags">
            {executors.map((name) => (
              <Tag
                key={name}
                closeable
                onClose={() => handleExecutorRemove(name)}
              >
                {name}
              </Tag>
            ))}
          </div>
        </div> */}
        <ExecutorSelect
          value={selectedExecutors}
          onChange={setSelectedExecutors}
        />

        {/* 预估时间 */}
        <Cell
          title="预估时间"
          isLink
          value="选择预估时间"
          onClick={() => setShowDatePicker(true)}
        />

        {/* 优先等级 */}
        <PrioritySelect
          value={priority}
          onChange={setPriority}
        />

        {/* 底部按钮 - 动态显示数量 */}
        <div className="filter-footer">
          <div className="filter-count">已找到10个筛选条件</div>
          <Button
            type="primary"
            block
            disabled={filterCount === 0}
            onClick={handleSubmit}
          >
            {filterCount > 0 ? `提交筛选 (${filterCount})` : "提交筛选"}
          </Button>
        </div>
      </div>


    </Popup>
  );
};

export default FilterDrawer;
